<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <el-card shadow="hover">
      <template #header>
        <span>项目信息</span>
      </template>
      <el-descriptions :column="3">
        <el-descriptions-item label="采购名称">{{ formData?.title }}</el-descriptions-item>
        <el-descriptions-item label="申请人">
          {{ formData?.lastRecord?.applyUsername }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">
          {{ formData?.lastRecord?.applyTime }}
        </el-descriptions-item>
        <el-descriptions-item label="申请说明">
          {{ formData?.lastRecord?.applyMark }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ formData?.status && Purchase_Status_Label[formData.status] }}
        </el-descriptions-item>
        <el-descriptions-item label="总金额">{{ formData?.amount }}</el-descriptions-item>
        <template v-if="formData?.lastRecord?.result">
          <el-descriptions-item label="审核人">
            {{ formData?.lastRecord?.reviewUsername }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间">
            {{ formData?.lastRecord?.reviewTime }}
          </el-descriptions-item>
          <el-descriptions-item label="审核结果">
            {{ formData?.lastRecord && Purchase_Apply_Label[formData.lastRecord.result] }}
          </el-descriptions-item>
          <el-descriptions-item label="审核理由" :span="3">
            {{ formData?.lastRecord?.reviewMark }}
          </el-descriptions-item>
        </template>
        <template v-if="formData?.status === PurchaseStatus.END">
          <el-descriptions-item label="快递单号">{{ formData?.deliveryNo }}</el-descriptions-item>
          <el-descriptions-item label="快递公司">
            {{ formData?.deliveryCompany }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
      <el-button @click="showPurchaseDialog" v-if="formData?.status === PurchaseStatus.PURCHASE"
        v-hasPerm="'fee:purchase:purchase'" plain icon="MessageBox">
        填报快递信息
      </el-button>
      <el-button type="primary" @click="showReviewDialog" v-if="formData?.status === PurchaseStatus.APPLY"
        v-hasPerm="'fee:purchase:review'" icon="Finished">
        审核
      </el-button>
    </el-card>
    <!-- 材料报销 -->
    <el-card class="mt10" shadow="hover">
      <template #header>
        <span>项目材料申购汇总</span>
      </template>
      <el-table ref="dataTableRef" v-loading="loading" :data="formData?.itemTypeAmounts" highlight-current-row
        v-if="formData">
        <el-table-column label="材料类型" width="120">
          <template #default="scope">
            {{ SaleMealTypeLabel[scope.row.type] }}
          </template>
        </el-table-column>
        <el-table-column label="合同总金额" prop="contractAmount">
          <template #default="scope">
            <span v-if="scope.row.type != 'NORM'">{{ scope.row.contractAmount }}</span>
            <span v-else>{{ scope.row.contractAmount + '(含人工' + scope.row.contractRenGongAmount + ')' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已申购金额" prop="applyAmount">
          <template #default="scope">
            <el-tag v-if="scope.row.compare < 0" type="danger">{{ scope.row.applyAmount }}</el-tag>
            <el-tag v-else type="success">{{ scope.row.applyAmount }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 申请清单 -->
    <el-card class="mt10" shadow="hover">
      <template #header>
        <span>本次申购清单</span>
      </template>
      <el-table ref="dataTableRef" v-loading="loading" :data="formData?.items" height="calc(100% - 40px)"
        highlight-current-row v-if="formData">
        <el-table-column label="材料名称" prop="name" />
        <el-table-column label="材料类型" width="120">
          <template #default="scope">
            {{ SaleMealTypeLabel[scope.row.materialType] }}
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="spec" />
        <el-table-column label="单位" prop="unit" />
        <el-table-column label="数量" align="center" prop="quantity" />
        <el-table-column label="单价" prop="amount" />
      </el-table>
    </el-card>

    <!-- 审核 -->
    <el-dialog v-model="reviewDialogVisible" title="审核" width="30%">
      <el-form label-width="60px">
        <el-form-item label="审核" prop="result">
          <el-radio-group v-model="reviewForm.result">
            <el-radio label="同意" value="1"></el-radio>
            <el-radio label="驳回" value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="理由" prop="reviewMark">
          <el-input type="textarea" v-model="reviewForm.reviewMark" placeholder="审核理由"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reviewDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleReview">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 采购填报快递 -->
    <el-dialog v-model="purchaseDialogVisible" title="采购" width="30%">
      <el-form label-width="100px">
        <el-form-item label="快递单号" prop="deliveryNo">
          <el-input v-model="purchaseForm.deliveryNo" placeholder="快递单号"></el-input>
        </el-form-item>
        <el-form-item label="快递公司" prop="deliveryCompany">
          <el-input type="textarea" v-model="purchaseForm.deliveryCompany" placeholder="快递公司"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="purchaseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handlePurchase">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { SaleMealTypeLabel } from "@/api/business/material/sealMeal.api";
import PurchaseAPI, {
  PurchaseStatus,
  Purchase_Status_Label,
  PurchaseDetail,
  PurchaseReviewVO,
  PurchaseVO,
  Purchase_Apply_Label,
} from "@/api/fee/purchase.api";

const route = useRoute();
const id = computed(() => route.query.id as string);

const loading = ref(false);
const formData = ref<PurchaseDetail>(); //合同信息
const applyDialogVisible = ref(false);
const reviewDialogVisible = ref(false);
const reviewForm = ref<PurchaseReviewVO>({
  recordId: formData.value?.lastRecord?.id || "",
  reviewMark: "",
  result: "1",
});
const purchaseDialogVisible = ref(false);
const purchaseForm = ref<PurchaseVO>({
  id: id.value,
  deliveryCompany: "",
  deliveryNo: "",
});

onMounted(() => {
  loadDetail();
});

function showReviewDialog() {
  reviewDialogVisible.value = true;
}
function handleReview() {
  reviewForm.value.recordId = formData.value?.lastRecord?.id || "";
  PurchaseAPI.review(reviewForm.value)
    .then(() => {
      ElMessage.success("审核成功");
      loadDetail();
    })
    .finally(() => {
      reviewDialogVisible.value = false;
    });
}

function showPurchaseDialog() {
  purchaseDialogVisible.value = true;
}

function handlePurchase() {
  PurchaseAPI.purchase(purchaseForm.value)
    .then(() => {
      ElMessage.success("提交成功");
      loadDetail();
    })
    .finally(() => {
      purchaseDialogVisible.value = false;
    });
}

const loadDetail = async () => {
  if (!id.value || id.value === "0") {
    return;
  }
  loading.value = true;
  try {
    formData.value = await PurchaseAPI.load(id.value);
  } catch (error) {
    console.error(error);
  }
  loading.value = false;
};
</script>

<style lang="scss" scoped></style>
